<template>
  <div class="choiceGoods">
    <el-dialog
      :title="dialogVisibleTile"
      :visible.sync="dialogVisible"
      width="780px"
      :destroy-on-close="true"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        :labelWidth="labelWidth"
        class="demo-ruleForm"
      >
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24">
            <el-form-item label="商品类目：">
              <el-cascader
                :options="categoryIdList"
                v-model="pid"
                @change="categoryIdChange"
                clearable 
                placeholder="请选择商品类目"
                :props="{ checkStrictly: true }"
                style="width:100%"
              ></el-cascader>
              <!-- <el-select
                v-model="ruleForm.spfl"
                placeholder="请选择商品类目"
                style="width:100%"
                clearable
                @change="chioseGoods"
              >
                <el-option
                  :value="item.value"
                  v-for="(item,index) in categoryIdList"
                  :key="index"
                  :label="item.label"
                ></el-option>
              </el-select>-->
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24">
            <el-form-item label="商品名称：" prop="goodsName">
              <el-input v-model="ruleForm.goodsName" placeholder="请输入商品名称">
                <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" style="text-align: center">
            <el-transfer
              style="text-align: left; display: inline-block"
              v-model="ruleForm.chioseVal"
              :titles="['全选商品', '已选商品']"
              :button-texts="['到左边', '到右边']"
              @change="chioseGoods"
              :format="{
                noChecked: '${total}',
                hasChecked: '${checked}/${total}'
              }"
              :data="dataList"
            ></el-transfer>
            <el-pagination
              :page-sizes="[10, 20, 30, 40, 50, 100]"
              :pager-count="7"
              :current-page="page.current"
              :page-size="page.size"
              :total="page.total"
              layout="prev, pager, next, jumper"
              style="text-align: left; margin: 10px 10px 0 19px"
              @size-change="sizeChange"
              @current-change="currentChange"
              small
            ></el-pagination>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSure()" :loading="loading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  platformgoodscategorytree,
  platformGoodsInfoPage,
} from "@/api/shop/platformProcurementInventory/platformStockOutList.js";
export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisibleTile: "",
      loading: false,
      labelWidth: "120px",
      rules: {
        lmmc: [
          {
            required: true,
            message: "请输入分组名称，不超过15个字",
            trigger: "blur",
          },
        ],
      },
      pid: [],
      ruleForm: {
        chioseVal: [],
        chioseGoods: [],
      },
      dataVal: [],
      categoryIdList: [],
      dataList: [],

      page: {
        total: 0,
        size: 100,
        current: 1,
      },
    };
  },
  methods: {
    getList(supplierMerchantId) {
      platformgoodscategorytree({ businessType: "" }).then((val) => {
        //商品类目
        let data = val.data.data;
        console.log(data);
        this.categoryIdList = data.map((item) => {
          return {
            value: item.categoryId,
            label: item.categoryName,
            children: item.children.map((items) => {
              return {
                value: items.categoryId,
                label: items.categoryName,
              };
            }),
          };
        });
      });
      if (supplierMerchantId) {
        this.supplierMerchantId = supplierMerchantId
      }
      this.getGoods({ categoryId: "",goodsName:'',supplierMerchantId :this.supplierMerchantId  });

      platformGoodsInfoPage({ categoryId: "",goodsName:'',supplierMerchantId :this.supplierMerchantId  }).then((val) => {
        this.dataVal = val.data.data.records;
      });
    },
    getGoods(obj) {
      console.log(this.$store.getters.userInfo);
      platformGoodsInfoPage(Object.assign(obj,this.page)).then((val) => {
        let data = val.data.data.records;
        this.page.total = data.total
        this.dataList = data.records.map((item) => {
          return {
            key: item.goodsId,
            label: item.goodsName,
          };
        });

        if (
          this.$parent.$parent.dataList[0].goods.length
        ) {
          //点击弹出框回显数据
          this.$parent.$parent.dataList[0].goods.forEach(
            (item) => {
              this.ruleForm.chioseVal.push(item.goodsId);
              this.chioseGoods(this.ruleForm.chioseVal);
            }
          );
        }
      });
    },
    handleSure() {
      console.log(this.ruleForm);
      this.$emit("trigger", this.ruleForm);
      this.handleClose();
    },
    handleClose() {
      this.dialogVisible = false;
      this.ruleForm = {
        chioseVal: [],
        chioseGoods: [],
      };
    },
    chioseGoods(e) {
      this.ruleForm.chioseGoods = [];
      console.log(e);
      e.forEach((item) => {
        this.dataVal.forEach((items) => {
          if (items.goodsId == item) {
            this.ruleForm.chioseGoods.push(items);
          }
        });
      });
    },
    onSearch() {
      this.getGoods({ categoryId: this.ruleForm.categoryId ,goodsName:this.ruleForm.goodsName,supplierMerchantId :this.supplierMerchantId })
    },
    categoryIdChange(e) {
      if (e.length > 1) {
        this.ruleForm.categoryId = e[1];
      } else {
        this.ruleForm.categoryId = e[0];
      }
      this.getGoods({ categoryId: this.ruleForm.categoryId ,goodsName:this.ruleForm.goodsName,supplierMerchantId :this.supplierMerchantId });
    },

    sizeChange(size) {
      this.page.size = size;
      this.getGoods({ categoryId: this.ruleForm.categoryId ,goodsName:this.ruleForm.goodsName,supplierMerchantId :this.supplierMerchantId });
    },
    currentChange(current) {
      this.page.current = current;
      this.getGoods({ categoryId: this.ruleForm.categoryId ,goodsName:this.ruleForm.goodsName,supplierMerchantId :this.supplierMerchantId });
    },
  },
};
</script>

<style>
</style>